<template>
    <div>
        第二个组件
    </div>
    <div>
        自定义指令
        <button v-has-none="'shop:edit'">修改</button>
        <button v-has-none="'shop:create'">编辑</button>
        <button v-has-none="'shop:delete'">删除</button>
    </div>
</template>

<script setup lang="ts">
import type { Directive } from 'vue';

localStorage.setItem('useId', 'use')

const permis = [
    "use:shop:edit",
    "use:shop:create",
    "use:shop:delete",
]

const useId = localStorage.getItem('useId') as string

// 通过 驼峰命名进行 与 v-has-none绑定    例子： v-aa 与  vAa 进行绑定
const vHasNone:Directive<HTMLElement,string> = (e,bingding)=>{
    console.log(!permis.includes(useId+':'+bingding.value));
    if(!permis.includes(useId+':'+bingding.value)){
        e.style.display = 'none'
    }
}

</script>


<style></style>